JavaScript এর মাধ্যমে scroll event হ্যান্ডল করে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করা একটি খুবই জনপ্রিয় এবং শক্তিশালী পদ্ধতি। প্যারালাক্স স্ক্রলিংয়ে, স্ক্রলিংয়ের সময় বিভিন্ন উপাদান (যেমন ব্যাকগ্রাউন্ড, মিডগ্রাউন্ড, ফরওয়ার্ড কন্টেন্ট) ভিন্ন গতিতে চলতে থাকে। JavaScript দিয়ে scroll event ট্র্যাক করলে, স্ক্রলিংয়ের সময় একাধিক লেয়ার বা উপাদানের গতির নিয়ন্ত্রণ করা সম্ভব হয়।
এখানে, আমরা দেখবো কীভাবে JavaScript দিয়ে scroll event হ্যান্ডল করে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করা যায়।
১. HTML স্ট্রাকচার
প্রথমে, HTML ফাইলে কিছু সেকশন তৈরি করতে হবে যেখানে প্যারালাক্স ইফেক্ট প্রযোজ্য হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Scrolling with JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Parallax Section -->
<div class="parallax" id="parallax-background"></div>
<div class="content">
<h1>Parallax Scrolling Example</h1>
<p>This is an example of Parallax effect created using JavaScript Scroll Event.</p>
</div>
<div class="parallax" id="parallax-midground"></div>
<div class="parallax" id="parallax-foreground"></div>
<script src="script.js"></script>
</body>
</html>
২. CSS ফাইল (styles.css)
এখন, CSS ফাইলে ব্যাকগ্রাউন্ড, মিডল গ্রাউন্ড এবং ফরওয়ার্ড লেয়ারগুলির জন্য প্রাথমিক স্টাইলিং দিতে হবে। এই লেয়ারগুলির মধ্যে প্যারালাক্স স্ক্রলিং প্রভাব তৈরি হবে।
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body Styling */
body {
font-family: Arial, sans-serif;
height: 2000px; /* Enough space to scroll */
}
/* Parallax Layers */
.parallax {
position: absolute;
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
z-index: -1; /* Makes sure layers stay behind content */
}
/* Background Layer */
#parallax-background {
background-image: url('background.jpg'); /* Replace with your background image */
}
/* Midground Layer */
#parallax-midground {
background-image: url('midground.jpg'); /* Replace with your image */
}
/* Foreground Layer */
#parallax-foreground {
background-image: url('foreground.jpg'); /* Replace with your image */
}
/* Content Section */
.content {
position: relative;
text-align: center;
padding: 50px;
background-color: rgba(255, 255, 255, 0.8);
color: #333;
}
.content h1 {
font-size: 3rem;
}
.content p {
font-size: 1.5rem;
}
৩. JavaScript কোড (script.js)
এখন, JavaScript দিয়ে scroll event হ্যান্ডল করা হবে, যাতে স্ক্রলিংয়ের সময় বিভিন্ন লেয়ারগুলির গতির পার্থক্য তৈরি হয়। আমরা window.scrollY ব্যবহার করে স্ক্রল পজিশন ট্র্যাক করবো এবং প্রতিটি লেয়ারের গতি আলাদা করে দিবো।
// Get all parallax layers
const background = document.getElementById('parallax-background');
const midground = document.getElementById('parallax-midground');
const foreground = document.getElementById('parallax-foreground');
// Function to handle scroll event
function handleScroll() {
let scrollPosition = window.scrollY; // Get the current scroll position
// Apply different speeds for different layers
background.style.transform = 'translateY(' + scrollPosition * 0.3 + 'px)';
midground.style.transform = 'translateY(' + scrollPosition * 0.6 + 'px)';
foreground.style.transform = 'translateY(' + scrollPosition * 1 + 'px)';
}
// Add scroll event listener
window.addEventListener('scroll', handleScroll);
কোডের ব্যাখ্যা
- HTML:
.parallaxক্লাসের তিনটি আলাদা সেকশন রয়েছে:#parallax-background,#parallax-midground, এবং#parallax-foreground।- প্রতিটি সেকশন একে অপর থেকে ভিন্ন গতিতে স্ক্রল হবে, যা প্যারালাক্স ইফেক্ট তৈরি করবে।
- CSS:
.parallaxক্লাসেposition: absoluteব্যবহার করা হয়েছে, যাতে লেয়ারগুলো একে অপরের উপরে সঠিকভাবে অবস্থান করতে পারে।background-size: coverএবংbackground-position: centerনিশ্চিত করবে যে ইমেজটি ওয়েবপেজের পুরো সেকশনে সঠিকভাবে ফিট করবে।z-index: -1ব্যাবহার করা হয়েছে যাতে কন্টেন্ট সেকশনটি সবার উপরে থাকে।
- JavaScript:
window.scrollYদ্বারা স্ক্রল পজিশন ট্র্যাক করা হচ্ছে, এবং প্রতিটি লেয়ারের জন্যtransform: translateY()ব্যবহার করে তাদের গতি পরিবর্তন করা হচ্ছে।background.style.transform = 'translateY(' + scrollPosition * 0.3 + 'px)'কোডে ব্যাকগ্রাউন্ড লেয়ারটি ধীরে স্ক্রল হবে (যেমনscrollPosition * 0.3), মিডগ্রাউন্ড দ্রুত এবং ফরওয়ার্ড লেয়ারটি আরো দ্রুত স্ক্রল হবে (যেমনscrollPosition * 1)।
ফলস্বরূপ
এই কোডের মাধ্যমে, স্ক্রলিংয়ের সময় প্রতিটি লেয়ার আলাদা গতিতে স্ক্রল হবে। ব্যাকগ্রাউন্ড ধীরে, মিডগ্রাউন্ড মাঝারি গতিতে এবং ফরওয়ার্ড কন্টেন্ট দ্রুত স্ক্রল হবে, যা একটি আকর্ষণীয় প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করবে।
সারাংশ
JavaScript এর মাধ্যমে scroll event হ্যান্ডল করে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করা একটি শক্তিশালী পদ্ধতি। এটি ব্যবহার করে বিভিন্ন লেয়ারকে ভিন্ন গতিতে স্ক্রল করার মাধ্যমে একটি গভীরতা এবং ডাইনামিক অভিজ্ঞতা তৈরি করা যায়। window.scrollY ব্যবহার করে স্ক্রল পজিশন ট্র্যাক করে লেয়ারগুলির গতির পার্থক্য তৈরি করা হয়, যা একটি ইন্টারঅ্যাকটিভ ওয়েব ডিজাইন তৈরি করে।
Read more
